<template>
	<view>
		
		<!-- 轮播图 -->
		<view class="goodsBanner_box">
			<u-swiper :list="swiperList" name="url"   mode="rect" height="650" border-radius="0"></u-swiper>
		</view>

		<!-- 商品 -->
		<view class="goodsInfor_box">
			<view class="goodsName">{{goodsDetail.name}}</view>
			<view class="goodsPrice_con">
				<view class="goodsPrice">
					<u-icon name="integral-fill" color="#ffaa00" size="28"></u-icon><text>{{goodsDetail.sale_price}}</text>
				</view>
				<view class="goodsStock">库存 {{goodsDetail.stock}}</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="goodsSection_box" v-if="goodsDetail.spec_type == 20" @click="specShow = true;">
			<view class="sectionItem">
				<view class="sectionTit">规格</view>
				<view class="sectionDesc">
					<!-- 型号 -->
				</view>
				<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
			</view>
		</view>

		<!-- 商品详情 -->
		<view class="goodsParser_box">
			<view class="parserTit">
				<u-divider color="#333">商品详情</u-divider>
			</view>
			<view class="parserCon">
				<u-parse :html="goodsDetail.content"></u-parse>
			</view>
		</view>

		<!-- 底部固定 -->
		<view class="goodsBtm_box">
			<view class="goodsMenu" @click="goIndex">
				<view class="menuIcon">
					<u-icon name="home-fill" color="#666" size="34"></u-icon>
				</view>
				<view class="menuName">首页</view>
			</view>

		

			<view class="goodsHandle">
				<!-- <view class="goodsCart" @click="openPop('cart')">加入购物车</view> -->
				<view class="goodsBuy" @click="openPop('goods')">立即兑换</view>
			</view>
		</view>

		<!-- 选择规格弹窗 -->
		<u-popup v-model="specShow" mode="bottom" closeable close-icon-size="40" :safe-area-inset-bottom="true">
			<view class="popBox">
				<view class="goodsInfor_con">
					<view class="goodsPic">
						<image :src="swiperList[0]" mode=""></image>
					</view>
					<view class="goodsCon">
						<view class="goodsPrice">
							￥<text>{{goods_price}}</text>
						</view>
						<view class="goodsSpec">库存 {{goods_stock}}</view>
					</view>
				</view>
				<view class="goodsSpec_con" v-if="goodsDetail.spec_type==20">
					<scroll-view scroll-y="true">
						<view class="specItem" v-for="(item, index) in spec_attr" :key="index">
							<view class="specTit">{{item.group_name}}</view>
							<view class="specCon">
								<view v-for="(spec_items, key) in item.spec_items" :key="key">
									<view class="specLi" :class="spec_items.checked? 'active' : ''"
										@click="selectSpec(index,key)">{{spec_items.spec_value}}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="goodsNum_con">
					<view class="numTit">数量</view>
					<view class="numCon">
						<u-number-box v-model="goods_num" :min="1" :max="goods_stock" @change="numChange">
						</u-number-box>
					</view>
				</view>
				<view class="goodsPost_con">
					<!-- <view class="goodsCart" @click="addCart('cart')">加入购物车</view> -->
					<view class="goodsBuy" @click="directBuy('goods')">立即购买</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsTit: '商品详情',
				goods_id: '',

				// 商品详情
				goodsDetail: {},

				// 轮播图
				swiperList: [],

				// 购买方式
				buy_type: '',

				// 商品价格
				goods_price: 0,

				// 商品库存
				goods_stock: 0,

				// 多规格商品
				goods_num: 1,
				spec_attr: [],
				spec_list: [],
				selectSpecArray: [],
				selectSpecId: '0',

				// 选择规格弹窗
				specShow: false,

				// 分享标识
				shareFlag: false,
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中'
			});
			console.log(option)
			var _this = this;
			_this.goods_id = option.goods_id;
			
			if (option.shareFlag) {
				_this.shareFlag = option.shareFlag;
			}
		},
		onShow() {

		},
		onReady() {
			var _this = this;
			_this.getGoodsDetail();
		},
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: _this.goodsTit,
				// imageUrl: '',
				path: '/package/mall/goodsDetail/goodsDetail?goods_id=' + _this.goods_id +
					'&shareFlag=true',
			}
		},
		methods: {
			
			
			setNotice(){
				uni.requestSubscribeMessage({
				  tmplIds: [
					  'idL6-k5MlvRgU7jQ8c0_rEq8E6IMUvbcJ2u_mRT8hzE',
					  'US0tIbiF4GX-X0tnnc3E5rB3VyTUxGyV9OXyHPQ3wFU',
					  ],
				  success (res) { }
				})
			},
			
			
			// 获取商品详情
			async getGoodsDetail() {
				var _this = this;
				_this.$u.get('/api/shop.goods/getDetail', {
					id: _this.goods_id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取商品详情==");
					console.log(res);
					var resData = res.data;
					_this.goodsDetail = resData;
					_this.swiperList=resData.img_list
				}).catch(res => {
					console.log(res);
				})
			},

			// 去首页
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
			appShare() {
				var _this = this;
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: '/static/sharePic.jpg',
					title: '记工本' + _this.goodsDetail.goods_name,
					miniProgram: {
						id: getApp().globalData.originalId,
						path: 'package/mall/goodsDetail/goodsDetail?goods_id=' + _this.goods_id +
							'&shareFlag=true',
						type: 0,
						webUrl: this.app_url
					},
					success: res => {
						console.log(JSON.stringify(res));
					}
				});
			},

			/**
			 * 弹窗
			 */
			// 打开弹窗
			openPop(buy_type) {
				var _this = this;
				
				var goodsDetail=_this.goodsDetail
				uni.navigateTo({
					url:'/pagesOther/order/orderSubmit?buy_type=goods&goods_id='+goodsDetail.id
				})
				
				return
				// #ifdef MP-WEIXIN
				_this.setNotice();
				// #endif
				
				let platform = uni.getSystemInfoSync().platform;
				// console.log(platform);
				// platform = 'android';
				
				// #ifdef APP-PLUS
				_this.buy_type = buy_type;
				_this.specShow = true;
				// #endif
				
				// #ifdef MP-WEIXIN
				uni.showModal({
					content: '小程序暂不支持在线兑换，请下载APP',
					title: '提示',
					confirmText: '去下载',
					cancelText: '暂不下载',
					success: function(e) {
						if (e.confirm) {
							uni.navigateTo({
								url: '/pagesOther/article/detail?id=4'
							})
						}
					}
				})
				// #endif
				

			},

			// 关闭弹出框
			closePop() {
				var _this = this;
				_this.specShow = false;
			},

			// 选择规格
			selectSpec(index, key) {
				// console.log("选择规格的索引值：" + index + ',' + key);
				var _this = this;
				var spec_attr = _this.spec_attr;
				var selectSpecArray = _this.selectSpecArray;
				let items = spec_attr[index].spec_items;
				// console.log(items);
				let curItem = items[key];
				if (curItem.checked) {
					curItem.checked = false;
					selectSpecArray[index] = '';
				} else {
					for (let i = 0; i < items.length; i++) {
						items[i].checked = false;
					}
					curItem.checked = true;
					selectSpecArray[index] = curItem.item_id;
				}

				console.log("==选择规格的数组==");
				console.log(selectSpecArray)

				_this.spec_attr = spec_attr;
				_this.selectSpecArray = selectSpecArray;

				// 更新商品规格信息
				_this.updateSpec();
			},

			// 更新商品规格信息
			updateSpec() {
				let _this = this;
				let selectSpecId = _this.selectSpecArray.join('_');
				console.log("==选择的规格id==")
				console.log(selectSpecId);

				// 查找skuItem
				let spec_list = _this.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == selectSpecId;
					});
				console.log("==选择的规格信息==")
				console.log(skuItem)

				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					var goods_price = _this.goods_price;
					var goods_stock = _this.goods_stock;
					goods_price = skuItem.form.goods_price;
					goods_stock = skuItem.form.stock_num;
				}

				_this.selectSpecId = selectSpecId;
				_this.goods_price = goods_price;
				_this.goods_stock = goods_stock;
			},

			// 修改购物车数量
			numChange(e) {
				console.log(e);
				var _this = this;
				_this.goods_num = e.value;
			},

			// 加入购物车
			addCart: function() {
				console.log("====通过购物车购买====")
				var _this = this;

				// 是否选择规格
				var selectSpecArray = _this.selectSpecArray;
				for (let i = 0; i < selectSpecArray.length; i++) {
					if (!selectSpecArray[i]) {
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}

				_this.$u.post('/api/shop.cart/add_do', {
					cart_goods_id: _this.goods_id,
					cart_goods_sku: _this.selectSpecId,
					cart_num: _this.goods_num,
				}).then(res => {
					console.log("==加入购物车==");
					console.log(res);
					uni.showToast({
						title: "已添加到购物车",
						icon: 'none'
					})

					_this.specShow = false;

					setTimeout(function() {
						// 跳转到购物车页面
						uni.navigateTo({
							url: '../shopCart/shopCart',
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 直接购买
			directBuy: function() {
				console.log("====直接购买====")
				var _this = this;
				var goodsDetail = _this.goodsDetail;
				var goods_id = _this.goods_id;
				var goods_num = _this.goods_num;

				// 是否选择规格
				var selectSpecArray = _this.selectSpecArray;
				for (let i = 0; i < selectSpecArray.length; i++) {
					if (!selectSpecArray[i]) {
						uni.showToast({
							title: '请选择规格',
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}

				var sku = '';
				// 多规格商品
				if (goodsDetail.spec_type == 20) {
					var sku = _this.selectSpecId;
				} else {
					var sku = 0;
				}

				_this.specShow = false;

				// 跳转直接购买
				uni.navigateTo({
					url: '../submitOrder/submitOrder?buy_type=goods&goods_id=' + goods_id + '&goods_num=' +
						goods_num + '&sku=' + sku,
				})
			},

		}
	}
</script>

<style scoped>
	button {
		padding: 0;
		margin: 0;
		background: transparent;
		height: 100%;
		line-height: inherit;
		font-size: inherit;
	}

	button::after {
		border: 0;
		background-color: none;
	}

	/* 轮播图 */
	.goodsBanner_box {
		width: 100%;
		height: 650rpx;
		position: relative;
	}

	/* 商品 */
	.goodsInfor_box {
		padding: 30rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.goodsName {
		font-size: 32rpx;
		color: #333;
		padding: 10rpx 0;
		overflow: hidden;
	}

	.goodsPrice_con {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goodsPrice {
		font-size: 30rpx;
		color: #FE401E;
	}

	.goodsPrice text {
		font-size: 44rpx;
		padding-left: 10rpx;
	}

	.goodsStock {
		font-size: 24rpx;
		color: #999;
	}

	/* 规格 */
	.goodsSection_box {
		padding: 30rpx;
		background-color: #fff;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.sectionItem {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sectionTit {
		flex: 3;
		font-size: 28rpx;
		color: #333333;
	}

	.sectionDesc {
		font-size: 24rpx;
		color: #C2C2C2;
		margin-right: 10rpx;
	}

	/* 商品详情 */
	.goodsParser_box {
		padding: 30rpx 0;
		background-color: #fff;
		overflow: hidden;
		margin-top: 20rpx;
		margin-bottom: 136rpx;
	}

	.parserTit {
		padding-bottom: 10rpx;
		overflow: hidden;
	}

	.parserCon {
		padding: 30rpx;
		word-wrap: break-word;
		overflow: hidden;
	}

	/* 底部固定 */
	.goodsBtm_box {
		width: 690rpx;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		z-index: 99;
		border-radius: 50rpx;
	}

	.goodsMenu {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	.goodsMenu .menuIcon {
		width: 100%;
		text-align: center;
		margin-top: 10rpx;
	}

	.goodsMenu .menuIcon image {
		width: 40rpx;
		height: 40rpx;
	}

	.goodsMenu .menuName {
		width: 100%;
		font-size: 24rpx;
		color: #333;
		text-align: center;
		margin-top: 5rpx;
	}

	.goodsHandle {
		overflow: hidden;
		display: flex;
	}

	.goodsHandle .goodsCart {
		width: 480rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background: #333333;
		border-radius: 38;
		overflow: hidden;
	}

	.goodsHandle .goodsBuy {
		width: 480rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		background-image: linear-gradient(to right, #6e8fe8, #327FE8);
		overflow: hidden;
	}

	/* 规格弹窗 */
	.popBox {
		padding: 40rpx;
	}

	.goodsInfor_con {
		overflow: hidden;
	}

	.goodsPic {
		float: left;
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.goodsCon {
		float: left;
		height: 160rpx;
		margin-left: 20rpx;
	}

	.goodsPrice {
		font-size: 30rpx;
		color: #FE401E;
	}

	.goodsPrice text {
		font-size: 44rpx;
	}

	.goodsSpec {
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.goodsSpec_con {
		padding: 30rpx 0;
		overflow: hidden;
	}

	.goodsSpec_con scroll-view {
		height: 300rpx;
	}

	.specItem {
		padding-top: 20rpx;
		overflow: hidden;
	}

	.specTit {
		font-size: 28rpx;
		color: #333333;
		padding-bottom: 20rpx;
		overflow: hidden;
	}

	.specCon {
		overflow: hidden;
	}

	.specLi {
		float: left;
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: #333;
		background: #f3f3f3;
		border-radius: 6rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.specLi.active {
		color: #FA5B12;
		background: #fcf1f1;
		border: 2rpx solid #fa5b12;
	}

	.goodsNum_con {
		padding: 30rpx 0;
		border-top: 2rpx solid #ECECEC;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.numTit {
		font-size: 28rpx;
		color: #333333;
		padding-bottom: 20rpx;
		overflow: hidden;
	}

	.goodsPost_con {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goodsPost_con .goodsCart {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background: #333333;
		border-radius: 38rpx 0 0 38rpx;
		overflow: hidden;
	}

	.goodsPost_con .goodsBuy {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
		background-image: linear-gradient('to right', #f90, #f90);
		border-radius: 38rpx;
		overflow: hidden;
	}
</style>
